<template>
  <PageDialog
    :title="title"
    v-model:visible="shows"
    :width="dialogInfo.width"
    :bt-list="dialogInfo.btList"
  >
    <page-form
      class="paddingBox order-model-formBox flex_wrap_start_start"
      v-model:ref-obj="formInfo.ref"
      :data="formInfo.data"
      :field-list="formInfo.fieldList"
      :rules="formInfo.rules"
      :label-width="formInfo.labelWidth"
    >
      <template v-slot:form-borrowDeptName>
        <el-input
          v-model="formInfo.data.borrowDeptName"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择借用部门'"
        >
          <template #append>
            <el-icon @click="checkDeptName"><MoreFilled /></el-icon>
          </template>
        </el-input>
      </template>
      <template v-slot:form-borrowUserName>
        <el-input
          v-model="formInfo.data.borrowUserName"
          class="not-mongolia"
          type="input"
          :required="true"
          :disabled="true"
          :placeholder="'请选择借用人'"
        >
          <template #append>
            <el-icon @click="checkUserName"><MoreFilled /></el-icon>
          </template>
        </el-input>
      </template>
      <template v-slot:form-borrowTime>
        <el-date-picker
          v-model="formInfo.data.borrowTime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm"
          placeholder="选择日期"
          @change="
            (val) => {
              changeRow(val, formInfo)
            }
          "
        >
        </el-date-picker>
      </template>
      <template v-slot:form-preReturnTime>
        <el-date-picker
          v-model="formInfo.data.preReturnTime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm"
          placeholder="选择日期"
          :disabled-date="
            (time) => {
              return formInfo?.disableDate(time)
            }
          "
          :disabled-hours="
            () => {
              return formInfo?.disabledHour()
            }
          "
          :disabled-minutes="
            () => {
              return formInfo?.disabledMinute()
            }
          "
          :disabled-seconds="
            () => {
              return formInfo?.disabledSecond()
            }
          "
        >
        </el-date-picker>
      </template>
    </page-form>
  </PageDialog>
  <SelectUsers
    v-if="selectUserInfo.visible"
    v-model:showDialog="selectUserInfo.visible"
    :api="getRrgUserList"
    :saveEmpty="true"
    :check-box="false"
    :highlight-row="true"
    @callback="selectUserCallBack"
  />
  <!-- 选择部门 -->
  <SelectDept
    v-if="useDeptInfo.visible"
    v-model:show-dialog="useDeptInfo.visible"
    :check-box="false"
    :highlight-row="true"
    :query="useDeptInfo.query"
    :save-empty="true"
    @callback="callbackUseDept"
  />
</template>
<script setup name="proportion">
import {
  disableDate,
  disabledHour,
  disabledMinute,
  disabledSecond,
  setDisDate,
} from '@/common/js/base'
import { getRrgUserList } from '@/api/base.js'
import moment from 'moment'
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: 'borrow',
  },
  showDialog: {
    type: Boolean,
    default: false,
  },
  options: {
    type: Array,
    default: () => {
      return []
    },
  },
  row: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const disDate = ref(+new Date())
const useDeptInfo = ref({
  visible: false,
  query: {
    status: 1,
    deptAuth: 'id',
  },
})
const selectUserInfo = ref({
  visible: false,
  saveEmpty: true,
  query: {},
})
const userInfo = ref(proxy.$store.state.user.userInfo)
const formInfo = ref({
  ref: null,
  data: {
    borrowTime: moment(new Date()).format('YYYY-MM-DD HH:mm'),
    borrowUserName: userInfo.value.user.name || '',
    borrowUser: userInfo.value.user.id || '',
    borrowDeptId: userInfo.value?.dept?.id || '',
    borrowDeptName: userInfo.value?.dept?.name || '',
  },
  fieldList: [
    {
      label: '借用部门',
      value: 'borrowDeptName',
      type: 'slot',
      required: true,
    },
    {
      label: '借用人',
      value: 'borrowUserName',
      type: 'slot',
      required: true,
    },
    {
      label: '借用时间',
      value: 'borrowTime',
      type: 'slot',
      required: true,
    },
    {
      label: '预计归还时间',
      value: 'preReturnTime',
      type: 'slot',
      required: true,
    },
    {
      label: '备注',
      value: 'remark',
      type: 'textarea',
      className: 'not-br',
    },
  ],
  rules: {
    borrowDeptName: [
      {
        required: true,
        message: '请选择借用部门',
        trigger: 'change',
      },
    ],
    borrowUserName: [
      {
        required: true,
        message: '请选择借用人',
        trigger: 'change',
      },
    ],
    borrowTime: [
      {
        required: true,
        message: '请选择借用时间',
        trigger: 'change',
      },
    ],
    /* preReturnTime: [
      {
        required: true,
        message: '请选择归还时间',
        trigger: 'change',
      },
    ], */
  },
  labelWidth: '120px',
})
// 弹窗相关
const dialogInfo = ref({
  width: '700px',
  btLoading: false,
  btList: [
    { label: '关闭', event: handleClose, show: true },
    {
      label: '保存',
      type: 'primary',
      event: save,
      show: true,
    },
  ],
})
const shows = computed({
  get() {
    return props.showDialog
  },
  set(newValue) {
    emits('update:showDialog', newValue) // 更新父组件shows
  },
})
watch(
  () => formInfo.value.data.borrowTime,
  (val) => {
    disDate.value = new Date(val).getTime()
  },
  {
    deep: true,
  }
)
watch(
  () => props.row,
  (val) => {
    if (val && props.type === 'update') {
      formInfo.value.data = val
      /*   if (!val.borrowTime) {
        formInfo.value.data.borrowTime = moment(new Date()).format(
          'YYYY-MM-DD HH:mm'
        )
      }
      if (!val.borrowUserName) {
        formInfo.value.data.borrowUserName = userInfo.value.user.name || ''
      }
      if (!val.borrowUser) {
        formInfo.value.data.borrowUser = userInfo.value.user.id || ''
      }
      if (!val.borrowDeptId) {
        formInfo.value.data.borrowDeptId = userInfo.value?.dept?.id || ''
      }
      if (!val.borrowDeptName) {
        formInfo.value.data.borrowDeptName = userInfo.value?.dept?.name || ''
      } */
    }
    formInfo.value.data.remark = val.remark
  },
  {
    deep: true,
    immediate: true,
  }
)
function save() {
  formInfo.value.ref.validate((valid) => {
    if (valid) {
      emits('callback', formInfo.value.data, () => {
        handleClose()
      })
    }
  })
}

function handleClose() {
  shows.value = false
  emits('reset')
}
function checkDeptName() {
  useDeptInfo.value.visible = true
}
function checkUserName() {
  selectUserInfo.value.visible = true
}
function callbackUseDept(row) {
  if (row) {
    formInfo.value.data.borrowDeptId = row.id
    formInfo.value.data.borrowDeptName = row.name
  } else {
    formInfo.value.data.borrowDeptId = ''
    formInfo.value.data.borrowDeptName = ''
  }
}
function selectUserCallBack(row) {
  if (row) {
    formInfo.value.data.borrowUser = row.id
    formInfo.value.data.borrowUserName = row.name
  } else {
    formInfo.value.data.borrowUser = ''
    formInfo.value.data.borrowUserName = ''
  }
}
function changeRow(val, row) {
  formInfo.value.data.preReturnTime = ''
  setDisDate(val, row)
}

formInfo.value.disableDate = disableDate
formInfo.value.disabledHour = disabledHour
formInfo.value.disabledMinute = disabledMinute
formInfo.value.disabledSecond = disabledSecond
</script>

<style scoped lang="scss">
:deep(.flex_wrap_start_start) {
  justify-content: space-around;
}
</style>
